<template>
	<view class="zljc-container">
		<topNav
			class="home-top"
			title="三级质量检查表"
			:isUnderline="true"
			backgroundColor="#fe689b"
			color="#ffffff"
            :isCustomBackEvent="true"
			@backCallback="backCallback"
		></topNav>
		<view class="info-box">
			<view class="info-title">基本信息</view>
			<view class="info-other">
				<view class="info-rows">
					<view class="info-label">时间</view>
					<view class="info-colon">：</view>
					<view class="info-text">{{ info.time }}</view>
				</view>
				<view class="info-rows">
					<view class="info-label">主题</view>
					<view class="info-colon">：</view>
					<view class="info-text">{{ info.text }}</view>
				</view>
			</view>
		</view>
		<view class="list-content">
			<scroll-view
				class="list-container"
				scroll-y="true"
				:style="'height:524px;'"
			>
				<view class="question-item">
					<view class="question-title">处理类型</view>
					<view
						class="question-zujian zujian-selected"
						@click="chuliShow = true"
						>{{ form.chulileixing || "请选择类型" }}</view
					>
				</view>
				<view class="question-item">
					<view class="question-title">原因分析</view>
					<view class="question-zujian">
						<u--textarea
							v-model="form.yuanyinfenxi"
							type="textArea"
							height="120"
						></u--textarea>
					</view>
				</view>
				<view class="question-item">
					<view class="question-title">整改措施</view>
					<view class="question-zujian">
						<u--textarea
							v-model="form.zhenggaicuoshi"
							type="textArea"
							height="120"
						></u--textarea>
					</view>
				</view>
				<view class="question-item">
					<view class="question-title">处理结果</view>
					<view
						class="question-zujian zujian-selected"
						@click="chulijieguo = true"
					>
						{{ form.chulijieguo || "请选择处理结果" }}
					</view>
				</view>
				<view class="question-item">
					<view class="question-title">上传图片</view>
					<view class="question-zujian">
						<u-upload
							:fileList="fileList1"
							@afterRead="afterRead"
							@delete="deletePic"
							name="1"
							multiple
							:maxCount="10"
						></u-upload>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="operation-box" :style="'padding-bottom:' + bottom + 'px;'">
			<view class="submit">
				<u-button
					type="error"
					iconColor="#fe689b"
					text="提交"
					@click="submitEvent"
				></u-button>
			</view>
		</view>
		<u-picker
			:show="chuliShow"
			:columns="chuliList"
			:closeOnClickOverlay="true"
			@confirm="chuliShowConfirm"
			@close="chuliShow = false"
			@cancel="chuliShow = false"
		></u-picker>
		<u-picker
			:show="chulijieguo"
			:columns="chulijieguoList"
			:closeOnClickOverlay="true"
			@confirm="chulijieguoConfirm"
			@close="chulijieguo = false"
			@cancel="chulijieguo = false"
		></u-picker>
	</view>
</template>

<script>
import { mapState } from "vuex";
export default {
	data() {
		return {
			info: {
				time: "2020.07.24-2022.10.02",
				status: "进行中",
				text: "【质量检查】分级护理制度质量考核评价标准-上海（运营）", // 假数据，请根据实际返回数据修改
			},
			chuliShow: false,
			chuliList: [["分析整改"]],
			chulijieguo: false,
			chulijieguoList: [["移交"]],

			form: {
				chulileixing: "",
				yuanyinfenxi: "",
				zhenggaicuoshi: "",
				chulijieguo: "",
				img: "",
			},
			fileList1: [],
		};
	},
	onLoad(options) {
		this.query = options;
		console.log(this.query);
	},
	methods: {
		backCallback() {
			uni.navigateTo({
				url: `/pages/index/audit/detail`,
			});
		},
		typeClick(item) {
			console.log(item);
		},
		confirm(indexs) {
			if (indexs.value.length > 0) {
				this.selectedKeshi = indexs.value[0];
			}
			this.show = false;
		},
		itemClick(text) {
			this.activeObj.title = text;
			this.popShow = true;
		},
		submitEvent() {
			uni.showModal({
				title: "提示",
				content: "是否提交",
				success: (res2) => {
					if (res2.confirm) {
						uni.navigateTo({
							url: `/pages/index/audit/index`,
						});
					}
				},
			});
		},
		chuliShowConfirm(indexs) {
			if (indexs.value.length > 0) {
				this.form.chulileixing = indexs.value[0];
			}
			this.chuliShow = false;
		},
		chulijieguoConfirm(indexs) {
			if (indexs.value.length > 0) {
				this.form.chulijieguo = indexs.value[0];
			}
			this.chulijieguo = false;
		},
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		afterRead() {},
	},
	computed: {
		...mapState({
			listHeight: (state) => {
				return (
					state.systemInfo.screenHeight -
					(state.systemInfo.top_topNav +
						uni.upx2px(276) +
						uni.upx2px(16) +
						uni.upx2px(42) +
						state.systemInfo.bottom)
				);
			},
			bottom: (state) => state.systemInfo.bottom,
		}),
	},
};
</script>

<style lang="scss" scoped>
.zljc-container {
	background-color: #f7f7f7;
	.info-box {
		background-color: #ffffff;
		color: #000000;
		height: 276rpx;
		.info-title {
			font-weight: bold;
			padding: 16rpx 48rpx;
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
			font-size: 28rpx;
		}
		.info-other {
			padding: 16rpx 32rpx;
			.info-rows {
				display: flex;
				display: flex;
				font-size: 24rpx;
				line-height: 36rpx;

				.info-item-text {
					padding: 16rpx;
					background-color: #f7f7f7;
					width: 100%;
					border-radius: 16rpx;
					margin: 16rpx 0;
				}
				.info-desc {
					font-size: 32rpx;
				}
			}
		}
	}
	.list-content {
		margin-top: 16rpx;
		background-color: #ffffff;
		.list-container {
			.question-item {
				padding: 32rpx;
				.question-title {
					color: #000000;
				}
				.question-zujian {
					margin-top: 16rpx;
				}

				.zujian-selected {
					padding: 16rpx;
					background-color: #f7f7f7;
					width: 100%;
					border-radius: 16rpx;
					margin: 16rpx 0;
					box-sizing: border-box;
				}
			}
		}
	}

	.operation-box {
		display: flex;
		justify-content: space-between;
		position: fixed;
		width: 100vw;
		left: 0;
		bottom: 0;
		z-index: 10;
		border-top: 2rpx solid rgba(0, 0, 0, 0.1);
		.submit {
			flex: 1;
			font-size: 28rpx;
			line-height: 42rpx;
		}
		.defen {
			flex: 1;
			text-align: center;
			font-size: 42rpx;
			line-height: 80rpx;
		}
		.total {
			flex: 1;
			text-align: center;
			font-size: 42rpx;
			line-height: 80rpx;
		}
	}
}
.pop-container {
	width: calc(100vw - 64rpx);
	border-radius: 32rpx;
	overflow: hidden;

	.pop-title {
		color: #000000;
		font-size: 36rpx;
		line-height: 50rpx;
		font-weight: bold;
		text-align: center;
		padding: 32rpx 32rpx 16rpx;
		// border-bottom: 2rpx solid #e5e6e6;
	}

	.form-content {
		padding: 0 32rpx 32rpx;
		box-sizing: border-box;
	}

	.opera-box {
		display: flex;
		justify-content: center;
		border-top: 2rpx solid #e5e6e6;
		.btn {
			flex: 1;
			font-size: 36rpx;
			line-height: 80rpx;
			text-align: center;
			color: #000000;
		}
		.btn + .btn {
			border-left: 2rpx solid #e5e6e6;
		}
	}
}
::v-deep .u-form {
	padding: 0 32rpx 32rpx;
	box-sizing: border-box;
}

.persion-form {
	padding: 16rpx 32rpx;
}

::v-deep .submit .u-button {
	background-color: #fe689b !important;
}
</style>
